<template>
	<view>
		<view class="bg-main u-p-30 u-p-t-80">
			<view class="u-flex">
				<view class="u-m-r-20">
					<u-icon name="checkmark-circle" size="80" color="#ffffff" v-if="form.state == '已完成'"></u-icon>
					<u-icon name="close-circle" size="80" color="#ffffff" v-else-if="form.state == '已取消'"></u-icon>
					<u-icon name="info-circle" size="80" color="#ffffff" v-else></u-icon>
				</view>
				<view class="u-flex-1">
					<view class="head-title u-m-b-10"><text class="u-font-bold u-font-36 white-text">{{form.state}}</text></view>
					<view class="u-font-24" v-if="form.state == '已完成'"><text class="white-text">回收订单完成时间为 {{form.createddatetime}}</text></view>
				</view>
			</view>
		</view>
		<view class="grid-box">
			<view class="u-flex">
				<view class="u-flex-1">
					<view class="msg-box u-border-bottom">
						<view class="tips-txt u-p-b-10">订单编号：{{form.number}}</view>
						<view class="item u-p-t-0">
							<view class="u-font-36">{{form.address.address}}</view>
						</view>
						<view class="item u-p-t-0 u-p-b-20">
							<view class="u-font-28 u-tips-color">{{form.address.name}}({{form.address.mobile}})</view>
						</view>
					</view>
					<view class="msg-box u-p-t-10">
						<view class="item">
							<text class="label">接单小哥：</text>
							<view class="text left">{{form.brother.name}}({{form.brother.mobile}})</view>
						</view>
						<view class="item" v-if="form.user">
							<text class="label">卖货客户：</text>
							<view class="text left">{{form.user.name}}({{form.user.mobile}})</view>
						</view>
						<!-- <view class="item" v-if="form.enterprise">
							<text class="label">卖货客户：</text>
							<view class="text left">{{form.enterprise.name}}({{form.enterprise.department || '管理员'}})</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		
		<view class="box-link">
			<view class="cell"><view class="radius"></view><view class="line"></view><view class="radius"></view></view>
			<view class="cell"><view class="radius"></view><view class="line"></view><view class="radius"></view></view>
		</view>
		
		<!-- 回收明细汇总 -->
		<view class="grid-box">
			<view class="head-title u-m-b-10"><text>回收明细汇总</text></view>
			
			<!-- <goods-list :details="form.details"></goods-list> -->
			<goods-table :details="confirmForm.details"></goods-table>
			<view class="dashed-line"></view>
			<view class="msg-box u-p-t-10">
				<view class="item">
					<text class="label">回收种类：</text>
					<view class="text left">共{{ confirmForm.details.length }}种</view>
				</view>
				<view class="item" v-if="form.weight > 0">
					<text class="label">回收总重：</text>
					<view class="text left">{{form.weight}}KG</view>
				</view>
				<view class="item" v-if="form.quantity > 0">
					<text class="label">回收总数：</text>
					<view class="text left">{{form.quantity}}件</view>
				</view>
				<view class="item">
					<text class="label">支付方式：</text>
					<view class="text left">{{form.payway}}</view>
				</view>
			</view>
			<view class="total">
				<text class="u-font-28">共支付金额:</text>
				<text class="total-price">
					￥{{ form.amount == 0 ? '--' : form.amount }}
				</text>
			</view>
			<!-- 下单用户客户组信息 -->
			<view class="u-p-t-30" v-if="form.enterprise">
				<view class="dashed-line"></view>
				<view class="head-title u-m-b-10 u-m-t-30"><text>下单用户客户组信息</text></view>
				<view class="msg-box">
					<view class="item">
						<text class="label">客户组名称：</text>
						<view class="text">{{form.enterprise.name}}</view>
					</view>
					<view class="item">
						<text class="label">所属部门：</text>
						<view class="text">{{form.enterprise.department || '管理员'}}</view>
					</view>
					<view class="item">
						<text class="label">所属地区：</text>
						<view class="text">{{form.enterprise.cityname}}</view>
					</view>
				</view>
			</view>
			
			<!-- 支付凭证 -->
			<!-- <view class="" v-if="form.picvoucher">
				<view class="head-title u-m-b-10"><text>支付凭证</text></view>
				<view class="upload-box">
					<view class="item">
						<u-image width="200rpx" height="200rpx" :src="fileURL+form.picvoucher" @click="seePhoto(fileURL+form.picvoucher)"></u-image>
					</view>
				</view>
			</view> -->
			<!-- QC拍照 -->
			<view class="" v-if="form.pics.length > 0">
				<view class="head-title u-m-b-20"><text>拍照</text></view>
				<view class="upload-box">
					<view class="item" v-for="(item,index) in form.pics" :key="index">
						<u-image width="200rpx" height="200rpx" :src="utils.getPic(item)" @click="seePhoto(item)"></u-image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="bottom-box">
			<view class="fixed-container">
				<view class="btn-group">
					<view class="u-flex">
						<view class="u-flex-1">
							<u-button type="error" class="navbtn" @click="startCancel" v-if="form.state != '已取消'">取消订单</u-button>
							<u-button @click="goList" v-else>返回列表</u-button>
						</view>
						<!-- <view class="u-flex-1">
							<u-button type="primary" @click="confirmStorage">提交</u-button>
						</view> -->
					</view>
				</view>
			</view>
			<view class="fixed-placeholder"></view>
		</view>
		
		<!-- 取消入库 -->
		<u-popup v-model="showCancel" mode="center" border-radius="14" z-index="999" closeable>
			<view class="u-p-40" style="width: 600rpx;">
				<view class="u-p-t-30 u-p-b-15 u-text-center"><text class="u-font-36">取消订单</text></view>
				<view class="u-p-b-30">
					<u-form :model="cancelForm" ref="uForm" label-position="top">
						<u-form-item label="选择追回金额方式：" required v-if="form.state == '已完成'">
							<u-radio-group v-model="cancelForm.way">
								<u-radio v-for="(item, index) in radioList" :key="index" :name="item.value">
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</u-form-item>
						
						<!-- <u-alert-tips type="warning" title="说明:" description="1.账户扣除会扣除客户账户上的余额，客户账户余额不足（已被提现）时无法扣除；该收货订单是现金收货时无法扣除。2.线下取消仅会撤销该订单，金额不会追回。"></u-alert-tips> -->
						<u-form-item label="请填写取消订单原因：" required >
							<u-input v-model="cancelForm.reason" type="textarea" :border="true" />
						</u-form-item>
					</u-form>
					<view class="u-p-b-10 tips-txt u-m-t-20">
						<view class="tips">说明：</view>
						<view class="tips">1.账户扣除会扣除客户账户上的余额，客户账户余额不足（已被提现）时无法扣除；该收货订单是现金收货时无法扣除。</view>
						<view class="tips">2.线下取消仅会撤销该订单，金额不会追回。</view>
					</view>
				</view>
				<u-button type="error" class="navbtn" @click="cancelOrder">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				id: 0,
				isoutbound: true,
				form: {
					store:{},
					make: [],
					userorderamount:0,
					commission:0,
					orderamount: 0,
					lossamount:0,
					lossratio:0,
					brother:{},
					user:{},
					staff:{
						// ysid:null,
						mobile:null,
						name:null,
					},
					details:[],
					pics: []
				},
				storageData: [],
				showReject: false,
				rejectForm:{
					reason: ''
				},
				// 分拣清算
				chooseShow: false,
				confirmForm:{
					orderid:0,
					details: [
						// {
						// 	id: 0,
						// 	name: '杂纸',
						// 	weight: 10,
						// 	price: 9.9
						// }
					],
					total: 0
				},
				// 提示价格范围
				tips:[
					// {
					// 	title: '',
					// 	description: ''
					// }
				],
				piclist: [],
				qcPic: '',
				// 取消订单
				radioList: [
					{
						name: '账户扣除',
						value: 1
					},
					{
						name: '线下',
						value: 2
					}
				],
				showCancel: false,
				cancelForm: {
					id: 0,
					reason: "",
					way: 0, //追回金额方式 (已完成订单必选),1.账户扣除 （现金支付时无效）2.线下
					state: ""
				},
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.isoutbound = opt.isoutbound
			this.getDetails(this.id)
		},
		computed: {
			...mapState({
				header: state => state.Authorization
			})
		},
		methods: {
			getDetails(id){
				this.$u.get('/User/Order/Detail?id='+id).then((res)=>{
					this.form = res
					this.form.details.forEach((item)=>{
						item.details.forEach((cell)=>{
							this.confirmForm.details.push({
								"show": false,
								"id": cell.productid,
								"price": cell.price,
								"weight": cell.weight,
								"amount": cell.amount,
								"typeremarks": cell.remarks,
								"allowedit": true,
								"minprice": 0,
								"highprice": 0,
								"err": false,
								"typenames": item.names,
								"name": cell.productname,
								"isweighing": cell.isweighing,
								"typeid": item.id,
								"pic": item.icon,
								"on": true
							})
						})
					})
				})
			},
			startCancel(){
				this.cancelForm.id = 0
				this.cancelForm.way = 0
				this.cancelForm.reason = ''
				this.showCancel = true
			},
			// 取消入库
			cancelOrder(){
				uni.showModal({
					title: '提示',
					content: '您确定要取消订单吗?',
					success: (res) => {
						if (res.confirm) {
							this.cancelForm.id = this.id
							console.log({
								id: this.cancelForm.id,
								reason: this.cancelForm.reason,
								way: this.cancelForm.way
							})
							this.$u.post('/User/Order/Cancel',{
								id: this.cancelForm.id,
								reason: this.cancelForm.reason,
								way: this.cancelForm.way
							}).then((res)=>{
								uni.showToast({
									icon: 'none',
									title: res.msg
								})
								this.showCancel = false
								this.getDetails(this.id)
							})
						}
					}
				})
			},
			seePhoto(url){
				let img = this.fileURL + url
				uni.previewImage({
					current: 0,
					urls: [img]
				});
			},
			goList(){
				uni.navigateBack()
			},

			// 上传照片
			uploadSuccess(data, index, lists, name) {
				this.qcPic = data.datas.path
			},
			// 上传图片失败时处理
			uploadError(data, index, lists, name) {
				uni.showToast({
					icon: 'none',
					title: '提交失败，请重试'
				})
			},
			// 删除分拣清算列表
			delGoods(index){
				uni.showModal({
					title: '提示',
					content: '确认删除此条回收物？',
					success: (res)=> {
						if (res.confirm) {
							this.confirmForm.details.splice(index,1)
							// 重新计算合计总价
							this.setTotal()
						}
					}
				})
			},
			// 关闭分拣清算窗口
			confirmChoose(confirmForm){
				this.tips = []
				this.confirmForm.orderid = this.id
				// 获取上一次添加的回收品信息
				let historyArr = []
				if(this.confirmForm.details.length > 0){
					historyArr = JSON.parse(JSON.stringify(this.confirmForm.details))
				}
				
				let details = confirmForm.details
				// 获取核实数据及价格
				details.forEach((cell,i)=>{
					this.$u.get(`/Waste/Price/Get?productId=${cell.id}&userId=0`).then((res)=>{
						details[i].price = res.price
						details[i].allowedit = res.allowedit
						if(details[i].allowedit){
							this.tips.push({
								title: `${cell.name}可设置价格`,
								description: `价格范围仅能设置在${res.minprice}-${res.highprice}元内`
							})
						}
						// 若有上一次添加的回收品信息，赋值上一次填写的重量
						historyArr.forEach((ha,i)=>{
							if(ha.id == cell.id){
								cell.weight = ha.weight
								cell.price = ha.price
							}
						})
					})
				})
				this.confirmForm.details = details

				this.chooseShow = false
			},
			// 计算合计值
			setTotal(){
				this.confirmForm.total = 0
				this.confirmForm.details.forEach((item)=>{
					this.confirmForm.total += item.weight*item.price
				})
			},
			// 待入库：提交
			// confirmStorage(){
			// 	let form = {
			// 		id: this.id,
			// 		qcPic: this.qcPic,
			// 		details: [],
			// 		isoutbound: this.isoutbound
			// 	}
			// 	this.confirmForm.details.forEach((item)=>{
			// 		form.details.push({
			// 			typeid: item.typeid,
			// 			weight: item.weight,
			// 			price: item.price.price,
			// 			typeremarks: item.typeremarks
			// 		})
			// 	})
			// 	this.$u.post('/Store/BrotherOrder/Storage', form).then((res) => {
			// 		uni.showToast({
			// 			title: res.msg,
			// 			icon: 'none'
			// 		})
			// 		this.getDetails(this.id)
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.dashed-line{
		position: relative;
		left: -30rpx;
		width: 690rpx;
		border-bottom: 1px dashed #e4e7ed;
		&:after{
			content: '';
			width: 28rpx;
			height: 28rpx;
			border-radius: 28rpx;
			background-color: #f7f7f7;
			display: block;
			position: absolute;
			top: -14rpx;
			left: -14rpx;
			
		}
		&:before{
			content: '';
			width: 28rpx;
			height: 28rpx;
			border-radius: 28rpx;
			background-color: #f7f7f7;
			display: block;
			position: absolute;
			top: -14rpx;
			right: -14rpx;
		}
	}
	.bottom-box{
		.fixed-container{
			position: fixed;
			bottom: 0;
			z-index: 99;
			background-color: #fff;
			width: 750rpx;
			padding-top: 0;
			height: 132rpx;
			box-shadow: 0 0 16rpx #e7e7e7;
		}
		.fixed-placeholder{
			height: 132rpx;
			width: 750rpx;
			margin-top: 30rpx;
		}
		.total{
			line-height: 80rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin: 0;
		}
		.btn-group{
			padding: 30rpx;
			.u-flex-1+.u-flex-1{
				margin-left: 20rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		font-weight: bold;
		.total-price {
			font-size: 40rpx;
			color: $u-color-orange;
		}
	}
</style>
